 <template>
  <div>
    <tTable :columns="columns" :data="tableData">
      <!-- 交易金额 -->
      <template v-slot:operate="slotProps">
        <el-button
          @click="checkDetail(slotProps.scope.row.id)"
          class="add-style"
          type="primary"
          size="small"
        >查看企业信息</el-button>
        <el-button
          v-if="isReject"
          @click="$emit('reject', slotProps.scope.row.id)"
          type="danger"
          size="mini"
        >拒绝</el-button>
        <el-button
          v-if="isAccept"
          @click="$emit('accept', slotProps.scope.row.id)"
          type="primary"
          class="add-style"
          size="mini"
        >接受</el-button>
      </template>
    </tTable>

    <el-dialog title="企业信息" :visible.sync="dialogVisible" width="50%">
      <div class="enterprice-container">
        <div class="title">企业信息</div>
        <div class="data">
          <div>
            <span>企业名称</span>
            <span>{{enterprice.infoName}}</span>
          </div>
          <div>
            <span>企业简称</span>
            <span>{{enterprice.infoAbb}}</span>
          </div>
          <div>
            <span>统一执照信用代码</span>
            <span>{{enterprice.infoLisenceSn}}</span>
          </div>
          <div>
            <span>营业期限</span>
            <span>{{ enterprice.infoIsPerpetual ? '永久' :enterprice.infoEndDate}}</span>
          </div>
          <div>
            <span>营业执照</span>
            <img class="image" :src="downImgHost + '/' + enterprice.infoLisenceImg" alt>
          </div>
          <div>
            <span>企业经营范围</span>
            <span>{{enterprice.infoScope}}</span>
          </div>
          <div>
            <span>单位所在地</span>
            <span>{{enterprice.infoLocProvinceName || '无'}} / {{enterprice.infoLocCityName || '无'}} / {{enterprice.infoLocDistrictName || '无'}}</span>
          </div>
          <div>
            <span>单位所在详细地址</span>
            <span>{{enterprice.infoLocAddress}}</span>
          </div>
        </div>

        <div class="title">法人代表</div>
        <div class="data">
          <div>
            <span>法人身份证号</span>
            <span>{{enterprice.elpCcSn}}</span>
          </div>
          <div>
            <span>证件有效期</span>
            <span>{{enterprice.elpCcIsPerpetual ? '永久' : enterprice.elpCcEndDate}}</span>
          </div>
          <div>
            <span>法人身份证正面</span>
            <img class="image" :src="downImgHost + '/' + enterprice.elpCcImgFont" alt>
          </div>
          <div>
            <span>法人身份证背面</span>
            <img class="image" :src="downImgHost + '/' + enterprice.elpCcImgEnd" alt>
          </div>
        </div>

        <div class="title">企业账户信息</div>
        <div class="data">
          <div>
            <span>企业支付宝</span>
            <span>{{enterprice.accAlipay}}</span>
          </div>
          <div>
            <span>企业开户银行</span>
            <span>{{enterprice.accBankBankName}}</span>
          </div>
          <div>
            <span>地区</span>
            <span>{{enterprice.accBankProvinceName || '无'}} / {{enterprice.accBankCityName || '无'}}</span>
          </div>
          <div>
            <span>开户支行</span>
            <span>{{enterprice.accBankBranchName}}</span>
          </div>
          <div>
            <span>银行开户名</span>
            <span>{{enterprice.accBankName}}</span>
          </div>
          <div>
            <span>对公银行账号</span>
            <span>{{enterprice.accBankSn}}</span>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrganizationById } from "api/profile";
import { formatDateTime } from "src/util/time";
import { downImgHost } from "src/config/env";
import tTable from "src/components/table/index.vue";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        ORG: "success", // 个人
        PERSON: "danger" // 企业
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      downImgHost: downImgHost,
      checkIndex: 0,
      searchData: "",
      dialogVisible: false,
      enterprice: {}, // 企业信息

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "infoName", label: "申请方" }
        },
        {
          attr: { prop: "phone", label: "申请方联系电话" }
        },
        {
          attr: { prop: "email", label: "电子邮件" }
        },
        {
          attr: { prop: "updateTime", label: "申请时间", width: "160" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "300" }
        }
      ]
    };
  },
  props: [
    "tableData",
    "isRecall",
    "pageSize",
    "total",
    "handleChange",
    "isReject",
    "isAccept",
    "reject",
    "accept",
    "isDown",
    "down"
  ],
  components: { tTable },
  methods: {
    checkDetail: function(id) {
      this.$router.push('/organization/activate/' + id);
      // this.dialogVisible = true;
      // getOrganizationById(id).then(res => {
      //   res.elpCcEndDate = formatDateTime(res.elpCcEndDate);
      //   res.infoEndDate = formatDateTime(res.infoEndDate);
      //   this.enterprice = res;
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}

.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
.enterprice-container {
  .title {
    @include sc(16px, #000);
    margin: 10px 0;
  }
  .data > div > span {
    @include sc(14px, #111);
  }
  .data > div > span:first-child {
    @include sc(14px, #aaa);
    width: 130px;
    text-align: right;
    display: inline-block;
  }

  .image {
    height: 100px;
    width: 100px;
  }
}
</style>
